@extends('layouts.accountmanage')

@section('title', '修改手机号码')

@section('header')
	@include('layouts.header-two')
@endsection

@section('content')
<div class="wrapper-box">			
				<div class="container">	
					<div class="telRevise">
						<h2>修改手机</h2>
						<div class="telRevise-process telRevise-process1">
				        	<ul>
				            	<li class="indent5 processActive">验证原手机号码</li>
				                <li class="indent30">绑定新手机</li>
				                <li class="indent50">绑定结果</li>
				            </ul>
				        </div>	
						<div class="telRevise-form">
							<form class="form-horizontal" action="{{ route('reviseMobile.verify')}}" method="post">
								{{ csrf_field() }}
							  	<div class="form-group">
							    	<label class="col-sm-4 control-label">原手机号码：</label>
								    <div class="col-sm-8">
										<input type="tel" class="form-control" name="telephone" maxlength="11" placeholder="请输入11位手机号码" value="{{ \Request::old('telephone') }}">
										@if ($errors->has('telephone'))
											<span class="error">
												{{ $errors->first('telephone') }}
											</span>
										@endif
								    </div>
							  	</div>
							  	<div class="form-group">
							    	<label class="col-sm-4 control-label">验证码：</label>
								    <div class="col-sm-8">
										<input type="text" class="form-control" name="captcha" placeholder="请输入验证码" required/>
										@if ($errors->has('captcha'))
											<span class="error">
                                        {{ $errors->first('captcha') }}
                                    		</span>
										@endif
										<a class="yzm" onclick="javascript:re_captcha();">
						                   <img src="{{captcha_src()}}" alt="验证码" title="刷新图片" width="100" height="34" id="captcha">
						                </a>									    									
								    </div>
							  	</div>
							  	<div class="form-group">
							    	<label class="col-sm-4 control-label">手机验证码：</label>
								    <div class="col-sm-8">
										<input type="text" class="form-control" name="securiytCode" placeholder="请输入手机验证码">
										@if ($errors->has('securiytCode'))
											<span class="error">
                                        {{ $errors->first('securiytCode') }}
                                    		</span>
										@endif
									    <a href="#" class="getCode" onclick="javascript:get_securiytCode();">获取验证码</a>
				    					<div class="reset-code" style="display:none;"><span class="c_second">60</span>S</div>
								    </div>
							  	</div>
								<div class="form-group">
								    <div class="col-sm-12">
								      	<button type="submit" class="reguesterBtn">下一步</button>
								    </div>
							  	</div>							  	
							</form>						
						</div>				        
					</div>					
				</div>
			</div>
@endsection

@section('script')
<script src="{{ asset('statics/js/jplaceholder.js') }}" ></script>
<!-- <script src="{{ asset('statics/js/from.js') }}" ></script> -->
<script>
	function re_captcha() {
	    $url = "{{ captcha_src() }}";
	        $url = $url + "/" + Math.random();
	        document.getElementById('captcha').src=$url;
	}

  	function get_securiytCode() {
  		var mobile = $('input[name="telephone"]').val();
  		var captcha = $('input[name="captcha"]').val();
  		if(!mobile || !captcha ){
			alert('手机号码和图像验证码都不能为空');
	  	}else{
	  		var url = "{{ route('mobileCode')}}";
	  		$.ajax({
	            type: "get",
	            url: url,
	            data: {'mobile':mobile, 'captcha' :captcha},
	            success: function(data) {
	            	show_second();
		            console.log(data);
	            	alert('发送验证码成功，注意查收！验证码有效期5分钟');
	            }
	        });
		}			    	
    }	
	function show_second(){
		$(".getCode").hide();
		$('.c_second').html('60');
		$('.reset-code').show();
		var second = 60;
		var timer = null;
		timer = setInterval(function(){
			second -= 1;
			if(second >0 ){
				$('.c_second').html(second);
			}else{
				clearInterval(timer);
				$('.getCode').show();
				$('.reset-code').hide();
			}
		},1000);	
	}
    //---------------------表单提交--------------------//
    $("form").submit(function(){
        var f=true;//假设通过
        if(checkTel()==false) f=false;
        return f;
    });
</script>
@endsection
@section('footer')
	@include('layouts.footer')
@endsection
